<template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="角色名称" prop="roleName">
         <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
           v-hasPermi="['web:role:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
           v-hasPermi="['web:role:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
           v-hasPermi="['web:role:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="角色编号" align="center" prop="roleId" />
       <el-table-column label="角色名称" align="center" prop="roleName" />
       <el-table-column label="显示顺序" align="center" prop="roleSort" />
       <el-table-column label="角色状态" align="center" prop="status">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
      
       <el-table-column label="创建时间" align="center" prop="createTime" width="155" />
       <el-table-column label="更新时间" align="center" prop="updateTime" width="155" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="140">
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
             v-hasPermi="['web:role:edit']">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
             v-hasPermi="['web:role:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" />
 
     <!-- 添加或修改前端角色信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
         </el-form-item>
         <el-form-item label="角色顺序" prop="roleSort">
           <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
         </el-form-item>
         <el-form-item label="角色等级" prop="roleType">
           <el-select v-model="form.roleType" placeholder="请选择角色等级" clearable>
             <el-option v-for="dict in dict.type.sys_cust_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
           </el-select>
         </el-form-item>
         <el-form-item label="角色状态" prop="status" label-width="100px">
           <span slot="label">
             <el-tooltip content="选择停用，则小程序端该角色的菜单将不会显示" placement="top">
               <i class="el-icon-question"></i>
             </el-tooltip>
             角色状态
           </span>
           <el-radio-group v-model="form.status">
             <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
             }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="菜单权限">
           <el-checkbox v-model="checkedAll" @change="handleCheckedAll">全选/全不选</el-checkbox>
           <el-tree class="tree-border" :data="menuList" show-checkbox check-on-click-node
             :default-checked-keys="deptNodeAll" ref="menu" node-key="id" empty-text="加载中，请稍候"
             :props="defaultProps" @check="handleNodeClick"></el-tree>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import { listRole, getRole, delRole, addRole, updateRole, menuList } from "@/api/djk/role";
 
 export default {
   name: "Role",
   dicts: ['sys_show_hide', 'sys_normal_disable', 'sys_cust_type'],
   data() {
     return {
       // 遮罩层
       loading: true,
       // 选中数组
       ids: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
       multiple: true,
       // 显示搜索条件
       showSearch: true,
       // 是否全选
       checkedAll: false,
       // 总条数
       total: 0,
       // 前端角色信息表格数据
       roleList: [],
       // 查询前端菜单信息列表
       menuList: [],
       // 单个角色的菜单
       deptNodeAll: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
       open: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 20,
         roleName: null,
         roleSort: null,
         status: null,
       },
       // 表单参数
       form: {},
       defaultProps: {
         id: "id",
         label: "menuName"
       },
       // 表单校验
       rules: {
         roleName: [
           { required: true, message: "角色名称不能为空", trigger: "blur" }
         ],
         roleSort: [
           { required: true, message: "显示顺序不能为空", trigger: "blur" }
         ],
         roleType: [
           { required: true, message: "请选择角色等级", trigger: "change" }
         ]
       }
     };
   },
   created() {
     this.getList();
     this.getMenuList();
   },
   methods: {
     /** 查询前端角色信息列表 */
     getList() {
       this.loading = true;
       listRole(this.queryParams).then(response => {
         this.roleList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
     },
     /** 查询前端菜单信息列表 */
     getMenuList() {
       menuList().then(response => {
         this.menuList = response.data;
       });
     },
     // 全选/不全选
     handleCheckedAll(value) {
       if (value) {
         this.deptNodeAll = [];
         this.menuList.forEach(e => {
           this.deptNodeAll.push(e.id);
           this.$nextTick(()=>{
             this.$refs.menu.setCheckedKeys(this.deptNodeAll);
           })
         });
       } else {
         this.deptNodeAll = [];
         this.$nextTick(()=>{
           this.$refs.menu.setCheckedKeys([]);
         })
       }
     },
     // 选择节点
     handleNodeClick(val){
       // 如果 != -1 既是存在
       if(this.deptNodeAll.indexOf(val.id) != -1){
         this.deptNodeAll = this.deptNodeAll.filter(item=>item != val.id);
        //  set是ES6中的一种数据结构，可以去除重复元素
         let set = new Set(this.deptNodeAll);
         this.deptNodeAll = Array.from(set);
        //  设置节点状态
         this.$refs.menu.setCheckedKeys(this.deptNodeAll);
       }else{
         this.deptNodeAll.push(val.id);
         //  set是ES6中的一种数据结构，可以去除重复元素
         let set = new Set(this.deptNodeAll);
         this.deptNodeAll = Array.from(set);
       }
       this.deptCheckedAll();
     },
     // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
     // 表单重置
     reset() {
       this.form = {
         roleId: null,
         roleName: null,
         roleSort: null,
         roleType: null,
         status: "0",
         delFlag: "0",
         menuIds: [],//菜单数组id
         remark: null
       };
       this.checkedAll = false;
       this.deptNodeAll = [];
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.roleId)
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
       this.title = "添加小程序角色";
       // 清空选择状态值
       this.$nextTick(()=>{
           this.$refs.menu.setCheckedKeys([]);
         })
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const roleId = row.roleId
       getRole(roleId).then(response => {
         this.form = response.data;
         // 弹出框
         if (response.data.menuIds) {
           this.deptNodeAll = response.data.menuIds;
         }
         this.open = true;
         this.title = "修改小程序角色";
         this.deptCheckedAll();
         this.$nextTick(()=>{
           this.$refs.menu.setCheckedKeys(this.deptNodeAll);
       })
       });
     },
     deptCheckedAll(){
       // 如已经全部选择，默认为全选状态
       if(this.deptNodeAll.length == this.menuList.length){
           this.checkedAll = true;
       }else{
         this.checkedAll = false;
       }
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.roleId != null) {
             this.form.menuIds = this.deptNodeAll;//菜单数组id
             updateRole(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
             addRole(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
             });
           }
         }
       });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       const roleIds = row.roleId || this.ids;
       this.$modal.confirm('是否确认删除小程序角色为"' + roleIds + '"的数据项？').then(function () {
         return delRole(roleIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
       }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
       this.download('web/role/export', {
         ...this.queryParams
       }, `role_${new Date().getTime()}.xlsx`)
     }
   }
 };
 </script>
 